<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8"/>
    <title>临池书法</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/public/libs/bootstrap/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/public/libs/bootstrap/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="/public/stylesheets/animate.min.css"/>

    <link href="/public/javascripts/viewer/viewer.css" rel="stylesheet">

    <link rel="stylesheet/less" type="text/css" href="/public/stylesheets/styles-bootcss.less">

    <script src="/public/javascripts/less.min.js"></script>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/public/javascripts/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/public/libs/bootstrap/js/bootstrap.min.js"></script>

    <script src="/public/javascripts/viewer/viewer.js"></script>

    <script>
        $(document).ready(function () {
            $('.images').viewer({
                title: false,
                navbar: false,
                url: 'data-original'
            });

            $('.btn-comment,.comment>.comment-list>li').click(function () {
                var $this = $(this);
                var tid = $this.closest('li').attr('data-topic');
                if (!tid) {
                    tid = $this.attr('data-tid');
                    $('#at-rid').val($this.attr('data-rid'));
                    $('#at-uid').val($this.attr('data-uid'));
                }
                $('#at-tid').val(tid);
                var user = $this.attr('data-user');
                var top = $this.offset().top - 60;
                $('.con-dialog').removeClass("hide").offset({
                    top: top
                });
                if (!$('.con-dialog').hasClass('hide')) {
                    var left = $('.con-dialog').width() / 2;
//                    $('.index-container').css('margin-left','100px');
                    $('.index-container').animate({
                        left: -left
                    }, 'fast');
                    $('.at-user').html(user);
                }
            });
            $('.comment-panel>.header>.close').click(function () {
                var left = $('.con-dialog').width() / 2;
                $('.con-dialog').addClass('hide');
                $('.index-container').animate({
                    left: 0
                }, 'fast');
                $('#at-tid').val('');
                $('#at-rid').val('');
                $('#at-uid').val('');
                $('#txtComment').text('');
            });
            $("#txtComment").keydown(function (event) {
                if (event.shiftKey && event.keyCode == 13) {

                } else if (event.keyCode == 13) {
                    var tid = $('#at-tid').val();
                    var rid = $('#at-rid').val();
                    var uid = $('#at-uid').val();
                    $.post('/' + tid + '/reply', {
                        tid: tid,
                        txt: $('#txtComment').html(),
                        rid: rid,
                        uid: uid
                    }, function (d) {
                        location.reload();
                    });
                    return false;
                }
            });

            $('.favorite').click(function (e) {
                var $this = $(this);
                var tid = $this.closest('li').attr('data-topic');
                $.ajax({
                    url: '/topic/' + tid + '/up',
                    method: 'POST',
                }).done(function (data) {
                    if (data.success) {
                        var currentCount = Number($this.next('.favorite-count').text().trim()) || 0;
                        if (data.action === 'up') {
                            $this.next('.favorite-count').text(currentCount + 1);
                            $this.addClass('favorited');
                        } else {
                            if (data.action === 'down') {
                                $this.next('.favorite-count').text(currentCount - 1);
                                $this.removeClass('favorited');
                            }
                        }
                    } else {
                        alert(data.message);
                    }
                }).fail(function (xhr) {
                    if (xhr.status === 403) {
                        alert('请先登录，登陆后即可点赞。');
                    }
                });
            });

        });
    </script>
</head>

<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top ">
    <div class="container shufa-nav">
        <a class="navbar-brand" href="/"><strong>墨香兰亭</strong></a>

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/?tab=all">发现</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
            <%if(currentUser){%>
            <div class="pull-right nav-container-right">
                <img class="img-user" src="<%= currentUser.avatar %>">
            </div>
            <div class="pull-right shufa-btn-login">
                <a href="/topic/create">发布</a>
            </div>
            <%}else{%>
            <div class="pull-right shufa-btn-login">
                <a href="/signin">登录</a>
            </div>
            <%}%>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>
<div class="container">
    <%if(currentUser){%>
    <div class="user-dialog pull-right hide">
        <div class="user-panel">
            <div class="triangle"></div>
            <div class="body">
                <div class="user-info">
                    <div class="profile"><img src="<%= currentUser.avatar %>"></div>
                    <p><span><%= currentUser.name %></span></p>

                    <p><span><%= currentUser.email %></span></p>
                </div>
                <hr/>
                <ul>
                    <li><a>我的作品</a></li>
                    <li><a href="/profile">账号设置</a></li>
                    <li><a>帮助中心</a></li>
                    <li><a href="/signout">退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>
    <%}%>

    <div class="index-container">
        <div class="index-left">
            <div class="con-menu">

            </div>
        </div>
        <div class="index-right">
            <div class="index-body">

                <!--<div class="con-header ">-->
                <!--<div class="img-box">-->
                <!--<img class="content" src="/public/images/Rectangle.png">-->
                <!--</div>-->
                <!--<img class="user" src="/public/images/text.png"/>-->
                <!--</div>-->
                <div class="con-content">
                    <ul class="clearTop">
                        <% recent_topics.forEach(function(topic){ %>
                        <li class="con-item" data-topic="<%= topic._id %>">
                            <div class="item-user"><img src="<%= topic.author.avatar_url %>"></div>
                            <div class="item-content">
                                <h3 class="user"><a href="#"><%= topic.author.name %></a></h3>
                                <!--<div class="detail pull-right"><a href="#">查看详情</a></div>-->

                                <p class="text"><%- topic.content %></p>

                                <div class="images">
                                    <% if(topic.images && topic.images.length==1){
                                    var width = parseInt(topic.images[0].width);
                                    var height =parseInt(topic.images[0].height);
                                    %>
                                    <ul>
                                        <% if( width > height ){ %>
                                        <li class="img-box-1-horizontal">
                                            <img class="img-size-1-horizontal"
                                                 data-original="//<%= topic.images[0].url %>"
                                                 src="//<%= topic.images[0].url %>?imageView2/1/w/256/h/192">
                                        </li>
                                        <% }else{ %>
                                        <li class="img-box-1-vertical">
                                            <img class="img-size-1-vertical"
                                                 data-original="//<%= topic.images[0].url %>"
                                                 src="//<%= topic.images[0].url %>?imageView2/1/w/192/h/256">
                                        </li>
                                        <% } %>
                                    </ul>
                                    <% }else{ %>
                                    <ul class="clearfix img-box-x-p<%= topic.images.length %>">
                                        <% topic.images.forEach(function(image){ %>
                                        <li class="img-box-x">
                                            <img class="img-siez-x" data-original="//<%= image.url %>"
                                                 src="//<%= image.url %>?imageView2/1/w/128/h/128">
                                        </li>
                                        <% }) %>
                                    </ul>
                                    <% } %>
                                </div>
                                <% var isUped = topic.ups.indexOf(currentUser._id)>=0 ? "favorited":"" %>
                                <p class="more"><span class="favorite <%= isUped %>"></span>
                                    <font class="favorite-count"><%= topic.ups.length||0 %></font><span
                                            class="btn-comment"
                                            data-user="<%= topic.author.name %>"><img
                                            src="/public/images/more.png"></span></p>
                                <% if(topic.replies && topic.replies.length>0){%>
                                <div class="comment">
                                    <div class="triangle"></div>
                                    <% if(topic.ups && topic.ups.length>0){%>
                                    <div class="favorite-list">
                                        <% topic.ups.forEach(function(){%>
                                        <span>令狐冲,阿紫</span>
                                        <%})%>
                                    </div>
                                    <% } %>
                                    <ul class="comment-list">
                                        <% topic.replies.forEach(function(reply){ %>
                                        <li data-tid="<%= topic._id%>" data-rid="<%= reply._id%>"
                                            data-remove="<%= currentUser?currentUser._id+''==reply.author._id+'':false %>"
                                            data-uid="<%= reply.author._id %>"
                                            data-user="<%= reply.author.name %>"><span><span class="author"><%= reply.author.name %></span><% if(reply.toAuthor){%>@<span
                                                class="author"><%= reply.toAuthor.name %></span><%}%> :</span> <span><%- reply.content %></span>
                                        </li>
                                        <%})%>
                                    </ul>
                                </div>
                                <% } %>
                            </div>
                        </li>
                        <% }) %>
                    </ul>
                </div>
            </div>
            <div class="con-dialog hide">
                <div class="comment-panel">
                    <div class="header">
                        <span><strong>评论</strong></span>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="body">
                        <div class="triangle"></div>
                        <span>@<span class="at-user"></span></span>
                        <input type="hidden" id="at-tid">
                        <input type="hidden" id="at-type">
                        <input type="hidden" id="at-rid">
                        <input type="hidden" id="at-uid">

                        <div id="txtComment" name="note" class="input-adaptive" contenteditable="plaintext-only"
                             placeholder="按Enter发送，Shift+Enter换行"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<script type="text/javascript" src="/public/javascripts/pin/jquery.pin.min.js"></script>
<script>
    $(document).ready(function () {
        $('.img-user').click(function () {
            $('.user-dialog').toggleClass('hide');
        })
    });
</script>
</body>
</html>